<template>
  <div class="order-management">
    <!-- 筛选栏 -->
    <el-form :inline="true" :model="filters" class="filter-form">
      <el-form-item label="所属团长">
        <el-select v-model="filters.groupLeader" placeholder="全部" clearable>
          <el-option label="全部" value="" />
          <el-option
            v-for="leader in groupLeaderOptions"
            :key="leader"
            :label="leader"
            :value="leader"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="订单号">
        <el-input
          v-model="filters.orderNo"
          placeholder="请输入内容"
          clearable
        />
      </el-form-item>
      <el-form-item label="下单时间">
        <el-date-picker
          v-model="filters.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="filters.status" placeholder="全部" clearable>
          <el-option label="全部" value="" />
          <el-option label="待支付" value="待支付" />
          <el-option label="已支付" value="已支付" />
          <el-option label="已取消" value="已取消" />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="filters.phone" placeholder="请输入内容" clearable />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="filters.name" placeholder="请输入内容" clearable />
      </el-form-item>
      <el-form-item label="收货人">
        <el-input
          v-model="filters.receiver"
          placeholder="请输入内容"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
        <el-button type="danger" @click="onExport">导出</el-button>
      </el-form-item>
    </el-form>

    <!-- tab切换 -->
    <el-tabs v-model="activeTab" class="tab-bar">
      <el-tab-pane label="全部" name="all" />
      <el-tab-pane label="普通订单" name="normal" />
      <el-tab-pane label="秒杀" name="seckill" />
      <el-tab-pane label="拼团" name="group" />
    </el-tabs>

    <!-- 统计栏 -->
    <div class="stat-bar">
      <el-tag type="info">应收金额合计 ￥{{ stat.receivable }}</el-tag>
      <el-tag type="success">实收金额合计 ￥{{ stat.received }}</el-tag>
      <el-tag type="danger">实收差额合计 ￥{{ stat.diff }}</el-tag>
    </div>

    <!-- 表格 -->
    <el-table :data="pagedData" border style="width: 100%">
      <el-table-column prop="orderNo" label="订单号" width="140" />
      <el-table-column prop="orderTime" label="下单时间" width="180" />
      <el-table-column prop="groupLeader" label="所属团长" width="120" />
      <el-table-column prop="buyer" label="下单人" width="120" />
      <el-table-column prop="receiver" label="收货人" width="120" />
      <el-table-column prop="phone" label="联系方式" width="140" />
      <el-table-column prop="productCount" label="商品数量" width="100" />
      <el-table-column prop="paidAmount" label="实付金额" width="100" />
      <el-table-column prop="status" label="订单状态" width="100" />
    </el-table>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :total="filteredData.length"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        @current-change="onPageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const groupLeaderOptions = ["A-团长", "B-团长", "C-团长", "D-团长"];

const allOrders = ref([
  {
    orderNo: "20200200003",
    orderTime: "2020-02-14 14:30:30",
    groupLeader: "A-团长",
    buyer: "weiwei",
    receiver: "张三",
    phone: "18555555555",
    productCount: 3,
    paidAmount: 25,
    status: "待支付",
    type: "normal",
    receivable: 25,
    received: 25,
  },
  {
    orderNo: "20200200003",
    orderTime: "2020-02-14 14:30:30",
    groupLeader: "B-团长",
    buyer: "xiaoxiao",
    receiver: "张三",
    phone: "18555555555",
    productCount: 3,
    paidAmount: 30,
    status: "待支付",
    type: "seckill",
    receivable: 30,
    received: 30,
  },
  {
    orderNo: "20200200003",
    orderTime: "2020-02-14 14:30:30",
    groupLeader: "C-团长",
    buyer: "akali",
    receiver: "张三",
    phone: "18555555555",
    productCount: 2,
    paidAmount: 20,
    status: "已支付",
    type: "group",
    receivable: 20,
    received: 20,
  },
  {
    orderNo: "20200200003",
    orderTime: "2020-02-14 14:30:30",
    groupLeader: "D-团长",
    buyer: "akali",
    receiver: "张三",
    phone: "18555555555",
    productCount: 1,
    paidAmount: 20,
    status: "已支付",
    type: "normal",
    receivable: 20,
    received: 20,
  },
]);

const filters = ref({
  groupLeader: "",
  orderNo: "",
  dateRange: [],
  status: "",
  phone: "",
  name: "",
  receiver: "",
});

const activeTab = ref("all");
const currentPage = ref(1);
const pageSize = 4;

const filteredData = computed(() => {
  let data = allOrders.value;
  if (activeTab.value !== "all") {
    if (activeTab.value === "normal")
      data = data.filter((o) => o.type === "normal");
    if (activeTab.value === "seckill")
      data = data.filter((o) => o.type === "seckill");
    if (activeTab.value === "group")
      data = data.filter((o) => o.type === "group");
  }
  if (filters.value.groupLeader) {
    data = data.filter((o) => o.groupLeader === filters.value.groupLeader);
  }
  if (filters.value.orderNo) {
    data = data.filter((o) => o.orderNo.includes(filters.value.orderNo));
  }
  if (filters.value.status) {
    data = data.filter((o) => o.status === filters.value.status);
  }
  if (filters.value.phone) {
    data = data.filter((o) => o.phone.includes(filters.value.phone));
  }
  if (filters.value.name) {
    data = data.filter((o) => o.buyer.includes(filters.value.name));
  }
  if (filters.value.receiver) {
    data = data.filter((o) => o.receiver.includes(filters.value.receiver));
  }
  if (filters.value.dateRange && filters.value.dateRange.length === 2) {
    const [start, end] = filters.value.dateRange;
    data = data.filter((o) => {
      const time = new Date(o.orderTime);
      return time >= new Date(start) && time <= new Date(end);
    });
  }
  return data;
});

const pagedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  return filteredData.value.slice(start, start + pageSize);
});

const stat = computed(() => {
  const receivable = filteredData.value.reduce(
    (sum, o) => sum + (o.receivable || 0),
    0
  );
  const received = filteredData.value.reduce(
    (sum, o) => sum + (o.received || 0),
    0
  );
  return {
    receivable: receivable.toFixed(2),
    received: received.toFixed(2),
    diff: (receivable - received).toFixed(2),
  };
});

function onSearch() {
  currentPage.value = 1;
}
function onReset() {
  filters.value = {
    groupLeader: "",
    orderNo: "",
    dateRange: [],
    status: "",
    phone: "",
    name: "",
    receiver: "",
  };
  currentPage.value = 1;
}
function onExport() {
  alert("导出功能待实现");
}
function onPageChange(page) {
  currentPage.value = page;
}
</script>

<style scoped>
.order-management {
  padding: 24px;
}
.filter-form {
  margin-bottom: 16px;
}
.tab-bar {
  margin-bottom: 16px;
}
.stat-bar {
  margin-bottom: 16px;
  display: flex;
  gap: 16px;
}
.pagination-wrapper {
  margin-top: 16px;
  text-align: right;
}
</style>